<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + 'px' }">
		<view class="title-bar" :style="{ top: systemInfo.statusBarHeight + 'px', height: systemInfo.titleBarHeight + 'px' }">
			<image @click="back()" src="@/static/image/common/icon_back_dark.png"></image>
		</view>
		<view class="page-content common-page-content" v-show="loaded">
			<view class="header-layout">
				<image></image>
				<view class="header-info">
					<text>{{ surname }}</text>
					<text>氏</text>
					<text>先</text>
					<text>祖</text>
				</view>
			</view>
			<view class="list-super-item" v-for="(row, index) in dataList" :key="index">
				<image class="list-item-bg"></image>
				<view class="ranking">{{ row.ranking || '' }}</view>
				<scroll-view scroll-x class="scroll-layout" v-if="row.tablets.length > 0">
					<view class="list-parent-item">
						<view @click="showTablet(tablet)" class="list-item" v-for="(tablet, key) in row.tablets" :key="key">
							<image></image>
							<view class="name-layout">
								<text>{{ tablet.ancestralHallMember ? tablet.ancestralHallMember.name : '' }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<navigation :ancestralHallId="id" :role="role"></navigation>
			<view class="bottom-layout">
				<offerings ref="offerings" :ancestralHallId="id"></offerings>
				<view class="control-layout">
					<view class="control-item" @click="showCommentPopup()">
						<image class="message"></image>
						<text>留言</text>
					</view>
					<view class="control-item" @click="showOffering()">
						<image class="worship"></image>
						<text>祭奠</text>
					</view>
					<view class="control-item" @click="toIncense()">
						<image class="incense"></image>
						<text>上香</text>
					</view>
					<view class="control-item" v-if="role == 1" @click="toTabletManage()">
						<image class="new-tablet"></image>
						<text>新增灵位</text>
					</view>
				</view>
			</view>
			<comment-popup ref="commentPopup" :type="2" :hallId="id" :role="role"></comment-popup>
			<detail-popup ref="detailPopup" :showDetail="memberDetail"></detail-popup>
			<offering-popup ref="offeringPopup" :type="2" :hallId="id" @onWorshipSuccess="onWorshipSuccess"></offering-popup>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import mixin from '../mixins/ancestral-hall.js';
import navigation from './components/navigation/navigation.vue';
import detailPopup from './components/detail-popup/detail-popup.vue';
import offerings from './components/offerings/offerings.vue';
import commentPopup from '@/pages/common/components/comment/popup.vue';
import offeringPopup from '@/pages/common/components/offering-popup/offering-popup.vue';

export default {
	mixins: [mixin],
	components: {
		navigation,
		commentPopup,
		detailPopup,
		offeringPopup,
		offerings
	},
	data() {
		return {
			loaded: false,
			id: undefined,
			surname: undefined,
			role: undefined,
			dataList: [],
			memberDetail: {}
		};
	},
	computed: {
		...mapState({
			systemInfo: state => state.app.systemInfo
		})
	},
	methods: {
		/* 返回 */
		back() {
			uni.navigateBack();
		},
		/* 加载家族成员 */
		loadMember() {
			this.$http.get('/ancestral-hall/member/list', { params: { ancestralHallId: this.id } }).then(res => {
				if (res.code === 200) {
					let member = this.getMemberByUser(res.data);
					if (member) {
						this.role = member.role;
					}
				}
			});
		},
		/* 加载灵位 */
		loadTablet() {
			this.$http.get('/ancestral-hall/tablet/list', { params: { ancestralHallId: this.id } }).then(res => {
				if (res.code === 200) {
					this.dataList = res.data;
				}
				this.loaded = true;
			});
		},
		/* 显示留言编辑弹窗 */
		showCommentPopup() {
			this.$refs.commentPopup.showPopup();
		},
		/* 显示祭奠弹窗 */
		showOffering() {
			this.$refs.offeringPopup.showPopup();
		},
		/* 跳转上香页面 */
		toIncense() {
			uni.navigateTo({
				url: '/pages/common/incense?type=2&hallId=' + this.id
			});
		},
		/* 跳转灵位管理页面 */
		toTabletManage() {
			uni.navigateTo({
				url: '/ancestral/pages/detail/ancestral-hall-tablet?ancestralHallId=' + this.id + '&surname=' + this.surname
			});
		},
		/* 显示灵位信息 */
		showTablet(tablet) {
			this.memberDetail = tablet.ancestralHallMember;
			this.$refs.detailPopup.open();
		},
		/* 祭奠成功监听 */
		onWorshipSuccess(item) {
			this.$refs.offerings.loadOfferingRecord();
		}
	},
	onLoad(data) {
		this.id = data.id;
		this.surname = data.surname;
		this.loadMember();
	},
	onShow() {
		this.loadTablet();
		this.$refs.offerings.loadOfferingRecord();
	}
};
</script>

<style lang="scss" scoped>
@import './ancestral-hall-detail.scss';
</style>
